
<nav class="uk-navbar">
    <a class="uk-navbar-brand" data-uk-offcanvas="{target:'#offcanvas-nav',mode:'push'}"
        onmouseover="$('#brand-img').addClass('brand-img-animation')"
        onmouseout="$('#brand-img').removeClass('brand-img-animation')">
        <img id="brand-img" class="brand-img-animation" width="28px;" height="28px;"
             alt="logo" src="//cdn.apihub.net/img/spinner.png">
    </a>
    <div id="offcanvas-nav" class="uk-offcanvas">
        <div class="uk-offcanvas-bar">
            <ul class="uk-nav uk-nav-offcanvas" style="padding-top:10px" data-uk-nav>
                <li><a href="/json-intro.html">首页</a></li>

                <li class="uk-nav-divider"></li>
                <li><a href="/redis/">网页版 redis 客户端</a></li>

                <li class="uk-nav-divider"></li>
                {% if page.url contains "/json/" %}
                <li><a href="/json/"><h1>Json 格式化</h1></a></li>
                {% else %}
                <li><a href="/json/">Json 格式化</a></li>
                {% endif %}
                <li><a href="/wsp/">WebSocket 联调</a></li>
                <li><a href="/base64/">Base64 编解码</a></li>
                <li><a href="/unicode/">\uxxxx 转中文</a></li>
                <li><a href="/timestamp/">时间戳 ⇄ 时间</a></li>
            </ul>
        </div>
    </div>
    <script>
        hotkeys('ctrl+b,command+b', function(event,handler) {
            if ($('#offcanvas-nav').is(":visible")) {
                UIkit.offcanvas.hide()
            } else {
                UIkit.offcanvas.show('#offcanvas-nav')
            }
        })
    </script>

    <div class="uk-navbar-flip">
        <!-- <ul class="uk-navbar-nav" id="disqus_thread_modal_entrance" style="display:none;">
            <li><a href="#disqus_thread_modal" data-uk-modal>反馈与意见</a></li>
        </ul>
        <div id="disqus_thread_modal" class="uk-modal">
            <div class="uk-modal-dialog">
                <a class="uk-modal-close uk-close"></a>
                <div id="disqus_thread">您的网络环境无法加载 disqus 的评论模块</div>
            </div>
            <script>
                var disqus_config = function () {
                    this.page.url = "https://feling.net{{ page.url }}";
                    this.page.identifier = "https://feling.net{{ page.url }}";
                };
                $('#the-gfw').on('passible', function() {
                    $('#disqus_thread_modal_entrance').show()
                    var d = document, s = d.createElement('script');
                    s.src = '//feling.disqus.com/embed.js';
                    s.setAttribute('data-timestamp', + new Date());
                    (d.head || d.body).appendChild(s);
                });
            </script>
        </div> -->

        <ul class="uk-navbar-nav uk-hidden-small" >
            {% if page.url contains "/json/" %}
                <li><a href="/base64/">Base64 编解码</a></li>
                <li><a href="/unicode/">\uxxxx 转中文</a></li>
                <li><a href="/wsp/">WebSocket 联调</a></li>
            {% endif %}
            {% if page.url contains "/base64/" %}
                <li><a href="/json/">Json 格式化</a></li>
                <li><a href="/unicode/">\uxxxx 转中文</a></li>
                <li><a href="/wsp/">WebSocket 联调</a></li>
            {% endif %}
            {% if page.url contains "/wsp/" %}
                <li><a href="/json/">Json 格式化</a></li>
                <li><a href="/unicode/">\uxxxx 转中文</a></li>
                <li><a href="/base64/">Base64 编解码</a></li>
            {% endif %}
            {% if page.url contains "/redis/" %}
                <li><a href="/json/">Json 格式化</a></li>
                <li><a href="/unicode/">\uxxxx 转中文</a></li>
                <li><a href="/base64/">Base64 编解码</a></li>
            {% endif %}
            {% if page.url contains "/unicode/" %}
                <li><a href="/json/">Json 格式化</a></li>
                <li><a href="/wsp/">WebSocket 联调</a></li>
                <li><a href="/base64/">Base64 编解码</a></li>
            {% endif %}
            <li><a href="/">更多 <i class="uk-icon-angle-double-right"></i></a></li>
            <li><a href="https://ocarina-diary.com/blogs/" target="_blank" rel="nofollow">陶笛日记</a></li>
        </ul>
    </div>

    <ul id="header-extend" class="uk-navbar-nav uk-navbar-content uk-hidden-small" style="padding-left: 0px;">
        {% raw %}
        <li style="float:right">
            <div id="header-notify" v-bind:class="{'uk-alert':true, 'uk-alert-danger':level=='danger', 'uk-alert-warning':level=='warning', 'uk-alert-success':level=='success'}" 
                style="display:none;margin-bottom:0px;" v-show="msg">
                {{msg}}
            </div>
            <script>
                vm_header_notify = new Vue({
                    el: '#header-notify',
                    data: {
                        level:'',
                        msg: ''
                    },
                    methods: {
                        notify: function(msg, level, duration) {
                            // msg: 字符串不能太长
                            // level: 'danger' 红色, 'warning'黄色,'success'绿色, '' 蓝色
                            if (isNaN(duration)) {
                                duration= 3000
                            }
                            if (msg.length > 110) {
                                msg = msg.substring(0, 100)
                            }
                            this.msg = msg
                            this.level = level
                            setTimeout(function(){vm_header_notify.msg = ''; vm_header_notify.level = ''}, duration)
                        }
                    }
                })
            </script>
        </li>
        {% endraw %}
    </ul>

</nav>